<template>
  <div class="news">
    <e-head></e-head>
    <div class="main-content">
      <router-info :current="routerInfo"></router-info>
      <div class="flex-container">
        <div class="flex-container-left">
          <div class="flex-left-title">{{ $t("lang.news") }}</div>
          <div class="flex-left-item-list"></div>
        </div>
        <div class="flex-container-right">
          <ul class="news-list">
            <li
              class="news-list-item"
              v-for="(item, index) in news.data"
              :key="index"
              @click="detail(item)"
            >
              <a>{{ item.title }}</a
              ><span>{{ item.create_time }}</span>
            </li>
          </ul>
          <div class="page-box">
            <Page
              :total="news.total"
              :page-size="6"
              :current="news.current"
              size="small"
              show-total
              @on-change="newsPageChange"
            />
          </div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
import { getNews } from "@/utils/api.js";
import { dateFormat } from "@/utils/util";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
  },
  data() {
    return {
      news: {
        total: 0,
        current: 1,
        pageSize: 10,
        data: [],
      },
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.news",
          route: "",
        },
      ],
    };
  },
  created() {
    this.fetchNews();
  },
  methods: {
    detail(e) {
      localStorage.setItem("news", JSON.stringify(e));
      this.$router.push("/news/detail/" + e.id);
    },
    fetchNews() {
      getNews({
        pageSize: this.news.pageSize,
        current: this.news.current,
      }).then((res) => {
        let data = res.data.data || [];
        let total = res.data.total;
        data.forEach((item, index) => {
          item.create_time = dateFormat(
            new Date(item.create_time),
            "yyyy-MM-dd HH:mm"
          );
          data[index] = item;
        });
        this.news.data = data;
        this.news.total = total;
      });
    },
    newsPageChange(e) {
      this.news.current = e;
      this.fetchNews();
    },
  },
};
</script>
<style lang="scss" scoped>
.news {
  .news-list {
    .news-list-item {
      height: 45px;
      line-height: 45px;
      border-bottom: 1px dashed #ddd;
      a {
        width: 80%;
        height: inherit;
        color: #666;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span {
        color: #999;
        float: right;
      }
    }
  }
}
</style>